<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
    <div class="formBox" id="pdfDom">
      <!-- 以下内容为父组件原有模板，保持结构与样式不变，仅依赖传入的 props 和回调 -->
      <div class="formHead">任务单信息</div>
      <div class="white">
        <div class="ml h44 rb" style="justify-content: right">
          <div class="mlBox"><span class="red">*</span>白蚁防治单位名称</div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <el-select
              v-model="taskForm.unitId"
              size="small"
              placeholder="请选择"
              filterable
              disabled
            >
              <el-option
                v-for="item in companyList"
                :key="item.controlId"
                :value="item.controlId"
                :label="item.controlName"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="gray">
        <div class="ml h44 rb" style="justify-content: right">
          <div class="mlBox"><span class="red">*</span>任务单编号</div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <el-input
              v-model="taskForm.unitName"
              size="small"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
      </div>

      <div class="white">
        <div class="ml">
          <div class="mlLeft"><span class="red">*</span>受理情况</div>
          <div class="mlRight">
            <div class="height1"><span class="red">*</span>受理日期</div>
            <div class="height1"><span class="red">*</span>信息来源</div>
            <div class="height3"><span class="red">*</span>地址</div>
            <div class="height3"><span class="red">*</span>住户类型</div>
          </div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <el-date-picker
              v-model="taskForm.applyDate"
              type="date"
              placeholder="选择日期"
              size="small"
              @change="(date) => handleDateChange(date, 'applyDate')"
            ></el-date-picker>
          </div>
          <div class="mrRight">
            <el-select
              v-model="taskForm.source"
              size="small"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in sourceList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </div>
          <div class="line3">
            <div
              class="line3Left"
              style="flex-direction: column; justify-content: center"
            >
              <div>
                <el-select
                  v-model="taskForm.addressType"
                  size="small"
                  placeholder="请选择地址"
                >
                  <el-option value="住宅" label="住宅"></el-option>
                  <el-option value="非住宅" label="非住宅"></el-option>
                </el-select>
              </div>
              <div
                style="margin-top: 8px"
                v-if="taskForm.addressType == '非住宅'"
              >
                <el-radio v-model="localRadio" label="系统选择"
                  >系统选择</el-radio
                >
                <el-radio v-model="localRadio" label="手动录入"
                  >手动录入</el-radio
                >
              </div>
            </div>
            <div class="line3Right">
              <div class="mrRight">
                <choose-area
                  v-if="
                    taskForm.addressType === '住宅' || localRadio === '系统选择'
                  "
                  v-model="taskForm.district"
                  @change="handleAreaChange"
                  size="small"
                />
                <el-input
                  v-else
                  v-model="taskForm.district"
                  size="small"
                  placeholder="请输入小区名称"
                ></el-input>
              </div>
              <div class="mrRight" style="border-bottom: none">
                <div class="flex2">
                  <el-select
                    v-model="taskForm.districtId"
                    size="small"
                    placeholder="请选择区"
                    @change="onAreaChange"
                    :disabled="
                      taskForm.addressType === '住宅' ||
                      localRadio === '系统选择'
                    "
                  >
                    <el-option
                      v-for="item in areaOptions"
                      :key="item.addressId"
                      :value="item.addressId"
                      :label="item.addressName"
                    ></el-option>
                  </el-select>
                </div>
                <div class="flex2">
                  <el-select
                    v-model="taskForm.street"
                    size="small"
                    placeholder="请选择街道"
                    :disabled="
                      taskForm.addressType === '住宅' ||
                      localRadio === '系统选择'
                    "
                  >
                    <el-option
                      v-for="item in streetOptions"
                      :key="item.addressId"
                      :value="item.addressId"
                      :label="item.addressName"
                    ></el-option>
                  </el-select>
                </div>
                <div class="flex2">
                  <el-input
                    v-model="taskForm.streetId"
                    size="small"
                    placeholder="请输入路（新村）以及弄（支弄）"
                    :disabled="
                      taskForm.addressType === '住宅' ||
                      localRadio === '系统选择'
                    "
                  ></el-input>
                </div>
              </div>
              <div class="mrRight">
                <div class="flex2">
                  <el-input
                    v-model="taskForm.houseNumber"
                    size="small"
                    placeholder="请输入"
                  ></el-input>
                </div>
                <span class="hcenter">号</span>
                <div class="flex2">
                  <el-input
                    v-model="taskForm.roomNumber"
                    size="small"
                    placeholder="请输入"
                  ></el-input>
                </div>
                <span class="hcenter">室</span>
              </div>
            </div>
          </div>
          <div class="line3">
            <div class="line3Left">
              <el-select
                v-model="taskForm.unitType"
                size="small"
                placeholder="请选择"
              >
                <el-option value="单位" label="单位"></el-option>
                <el-option value="个人" label="个人"></el-option>
              </el-select>
            </div>
            <div class="line3Right">
              <template v-if="taskForm.unitType == '个人'">
                <div class="box">
                  <div class="box_left rb">姓名</div>
                  <div class="box_right rb">
                    <el-input
                      v-model="taskForm.name"
                      size="small"
                      placeholder="请输入姓名"
                    ></el-input>
                  </div>
                </div>
                <div class="box2">
                  <div class="box_left rb">联系电话</div>
                  <div class="box_right rb">
                    <el-input
                      v-model="taskForm.contactPhone"
                      size="small"
                      placeholder="请输入联系电话"
                    ></el-input>
                  </div>
                </div>
              </template>
              <template v-if="taskForm.unitType == '单位'">
                <div class="box">
                  <div class="box_left rb">单位名称</div>
                  <div class="box_right rb">
                    <el-input
                      v-model="taskForm.companyName"
                      size="small"
                      placeholder="请输入单位名称"
                    ></el-input>
                  </div>
                </div>
                <div class="box">
                  <div class="box_left rb">联系人</div>
                  <div class="box_right rb">
                    <el-input
                      v-model="taskForm.contactPerson"
                      size="small"
                      placeholder="请输入联系人"
                    ></el-input>
                  </div>
                </div>
                <div class="box">
                  <div class="box_left rb">联系电话</div>
                  <div class="box_right rb">
                    <el-input
                      v-model="taskForm.contactPhone"
                      size="small"
                      placeholder="请输入联系电话"
                    ></el-input>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>

      <div class="gray">
        <div class="ml h264">
          <div class="mlLeft h264 rb"><span class="red">*</span>查勘情况</div>
          <div class="mlRight">
            <div class="height1"><span class="red">*</span>查勘日期</div>
            <div class="height1"><span class="red">*</span>房屋类型</div>
            <div class="height1"><span class="red">*</span>是否是白蚁</div>
            <div class="height1"><span class="red">*</span>房屋性质</div>
            <div class="height1"><span class="red">*</span>是否是初次</div>
            <div class="height1"><span class="red">*</span>发现部位</div>
          </div>
        </div>
        <div class="mr">
          <div class="mrRight">
            <el-date-picker
              v-model="taskForm.appointmentDate"
              type="date"
              placeholder="选择日期"
              size="small"
              @change="(date) => handleDateChange(date, 'appointmentDate')"
            ></el-date-picker>
          </div>
          <div class="mrRight">
            <el-select
              v-model="taskForm.houseTypeSurvey"
              size="small"
              placeholder="请选择"
            >
              <el-option value="旧里" label="旧里"></el-option>
              <el-option value="新里" label="新里"></el-option>
              <el-option value="工房" label="工房"></el-option>
              <el-option value="花园住宅" label="花园住宅"></el-option>
              <el-option value="商品房" label="商品房"></el-option>
              <el-option value="其他" label="其他"></el-option>
              <el-option value="非居住" label="非居住"></el-option>
            </el-select>
          </div>
          <div class="mrRight">
            <el-select
              v-model="taskForm.houseTypeSurvey"
              size="small"
              placeholder="请选择"
            >
              <el-option value="是">是</el-option>
              <el-option value="否">否</el-option>
            </el-select>
          </div>
          <div class="mrRight">
            <el-select
              v-model="taskForm.houseNature"
              size="small"
              placeholder="请选择"
              v-if="localRadio === '手动录入'"
            >
              <el-option value="公房">公房</el-option>
              <el-option value="售后房">售后房</el-option>
              <el-option value="商品房">商品房</el-option>
              <el-option value="其他">其他</el-option>
            </el-select>
            <el-input
              v-else
              v-model="taskForm.houseNature"
              size="small"
              placeholder="请输入"
              disabled
            ></el-input>
          </div>
          <div class="mrRight">
            <el-select
              v-model="taskForm.isFirstTime"
              size="small"
              placeholder="请选择"
            >
              <el-option value="是">是</el-option>
              <el-option value="否">否</el-option>
            </el-select>
          </div>
          <div class="mrRight">
            <el-input
              v-model="taskForm.discoveryLocation"
              size="small"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
      </div>

      <div class="white">
        <div class="ml h88">
          <div class="mlLeft h88" style="border-right: none">
            <span class="red">*</span>是否灭治
          </div>
        </div>
        <div class="mrr">
          <div class="mrr_left rb">
            <el-select
              v-model="taskForm.isConstruction"
              size="small"
              placeholder="请选择"
            >
              <el-option value="是">是</el-option>
              <el-option value="否">否</el-option>
            </el-select>
          </div>
          <div class="mrr_right">
            <div class="top rb">
              <el-input
                v-if="taskForm.isConstruction === '是'"
                v-model="taskForm.constructionSituation"
                size="small"
                placeholder="请输入施工情况"
              ></el-input>
              <el-input
                v-if="taskForm.isConstruction === '否'"
                v-model="taskForm.constructionReason"
                size="small"
                placeholder="请输入原因"
              ></el-input>
            </div>
            <div class="bottom rb">
              <FileUpload
                v-model="taskForm.img1"
                :fileType="fileType"
                :isShowTip="false"
                :listShow="false"
                :limit="1"
              >
                <template v-slot:buttonText>上传现场照片</template>
              </FileUpload>
            </div>
          </div>
        </div>
      </div>

      <template v-if="taskForm.isConstruction === '是'">
        <div class="gray">
          <div class="ml h264">
            <div class="mlLeft h264 rb"><span class="red">*</span>施工情况</div>
            <div class="mlRight">
              <div class="height1"><span class="red">*</span>施工日期</div>
              <div class="height1"><span class="red">*</span>灭治部位</div>
              <div class="height1">
                <span class="red">*</span>灭治面积（m²）
              </div>
              <div class="height1"><span class="red">*</span>用药名称</div>
              <div class="height1">
                <span class="red">*</span>收费金额（元）
              </div>
              <div class="height1"><span class="red">*</span>白蚁蚁种</div>
            </div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <el-date-picker
                v-model="taskForm.constructionDate"
                type="date"
                placeholder="选择日期"
                size="small"
                @change="(date) => handleDateChange(date, 'constructionDate')"
              ></el-date-picker>
            </div>
            <div class="mrRight">
              <div class="mrRight_left">
                <el-select
                  v-model="taskForm.constructionLocationType"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option value="自用">自用</el-option>
                  <el-option value="公用">公用</el-option>
                </el-select>
              </div>
              <div class="mrRight_right">
                <el-button
                  type="primary"
                  size="small"
                  @click="$emit('open-area-dialog')"
                  >添加灭治部位</el-button
                >
              </div>
            </div>
            <div class="mrRight">
              <el-input
                v-model="taskForm.constructionArea"
                size="small"
                placeholder="请输入"
                @input="(v) => handleDecimalInput(v, 'constructionArea')"
              ></el-input>
            </div>
            <div class="mrRight">
              <el-input
                v-model="taskForm.medicineName"
                size="small"
                placeholder="请输入"
              ></el-input>
            </div>
            <div class="mrRight">
              <el-input
                v-model="taskForm.chargeAmount"
                size="small"
                placeholder="请输入"
                @input="(v) => handleDecimalInput(v, 'chargeAmount')"
              ></el-input>
            </div>
            <div class="mrRight">
              <el-select
                v-model="taskForm.termiteSpecies"
                size="small"
                placeholder="请选择"
                style="width: 50%"
              >
                <el-option value="白蚁">白蚁</el-option>
                <el-option value="散白蚁">散白蚁</el-option>
                <el-option value="其他">其他</el-option>
              </el-select>
              <el-input
                style="width: 50%"
                v-if="taskForm.termiteSpecies === '其他'"
                v-model="taskForm.otherSpecies"
                size="small"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="白色 white">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>用户满意度</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <el-select
                v-model="taskForm.userSatisfaction"
                size="small"
                placeholder="请选择"
              >
                <el-option value="满意">满意</el-option>
                <el-option value="较满意">较满意</el-option>
                <el-option value="不满意">不满意</el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="gray">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>用户签名</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <el-input
                v-model="taskForm.acceptanceResult"
                size="small"
                placeholder="请输入"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="white">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>上传任务单</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <FileUpload
                v-model="taskForm.img3"
                :fileType="fileType"
                :isShowTip="false"
                :listShow="false"
                :limit="1"
              >
                <template v-slot:buttonText>上传</template>
              </FileUpload>
            </div>
          </div>
        </div>
        <div class="gray">
          <div class="ml h44 rb" style="justify-content: right">
            <div class="mlBox"><span class="red">*</span>日期</div>
          </div>
          <div class="mr">
            <div class="mrRight">
              <el-date-picker
                v-model="taskForm.acceptanceDate"
                type="date"
                placeholder="选择日期"
                size="small"
                @change="(date) => handleDateChange(date, 'acceptanceDate')"
              ></el-date-picker>
            </div>
          </div>
        </div>
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="getPdf">下 载</el-button>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import chooseArea from "@/views/manage/components/chooseArea.vue";
export default {
  name: "TaskCreateDialog",
  components: { chooseArea },
  props: {
    value: { type: Boolean, default: false },
    taskForm: { type: Object, required: true },
    taskId: { type: [String, Number], default: null },
    companyList: { type: Array, default: () => [] },
    sourceList: { type: Array, default: () => [] },
    areaOptions: { type: Array, default: () => [] },
    streetOptions: { type: Array, default: () => [] },
    stKindList: { type: Array, default: () => [] },
    radio: { type: String, default: "系统选择" },
    fileType: { type: Array, default: () => ["png", "jpg", "jpeg"] },
    handleAreaChange: { type: Function, required: true },
    onAreaChange: { type: Function, required: true },
    handleDecimalInput: { type: Function, required: true },
    getPdf: { type: Function, required: true },
    cancel: { type: Function, required: true },
    submitForm: { type: Function, required: true },
  },
  data() {
    return {
      htmlTitle: "任务单信息",
    };
  },
  watch: {
    taskId: {
      handler(newTaskId) {
        if (newTaskId) {
          // 编辑模式：填充假数据
          this.fillMockData();
        } else {
          // 新建模式：清空表单
          this.clearForm();
        }
      },
      immediate: true,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("update:value", v);
      },
    },
    localRadio: {
      get() {
        return this.radio;
      },
      set(v) {
        this.$emit("update:radio", v);
      },
    },
    dialogTitle() {
      return this.taskId
        ? "白蚁灭治任务单→编辑任务单"
        : "白蚁灭治任务单→新建任务单";
    },
  },
  methods: {
    // 格式化日期为 yyyy-MM-dd 格式
    formatDate(date) {
      if (!date) return "";
      if (typeof date === "string") {
        // 如果已经是字符串格式，检查是否需要转换
        if (date.includes("/")) {
          // 处理 yyyy/MM/dd 格式
          const dateObj = new Date(date);
          return this.formatDateToYYYYMMDD(dateObj);
        }
        return date;
      }
      if (date instanceof Date) {
        return this.formatDateToYYYYMMDD(date);
      }
      return date;
    },
    // 将日期对象转换为 yyyy-MM-dd 格式
    formatDateToYYYYMMDD(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    // 处理日期选择器变化
    handleDateChange(date, field) {
      if (date) {
        this.taskForm[field] = this.formatDateToYYYYMMDD(date);
      } else {
        this.taskForm[field] = "";
      }
    },
    // 将 yyyy-MM-dd 格式的字符串转换为 Date 对象
    parseDateString(dateString) {
      if (!dateString) return null;
      if (typeof dateString === "string") {
        // 处理 yyyy-MM-dd 格式
        if (dateString.includes("-")) {
          return new Date(dateString);
        }
        // 处理其他格式
        return new Date(dateString);
      }
      return dateString;
    },
    // 填充假数据（编辑模式）
    fillMockData() {
      Object.assign(this.taskForm, {
        // 基本信息模块
        unitId: "1", // 白蚁防治单位ID
        unitName: "上海白蚁防治有限公司", // 单位名称
        source: "企业自行受理", // 受理来源
        addressType: "系统选择", // 地址类型
        addressMethod: "系统选择", // 地址选择方式

        // 地址信息模块
        district: "浦东新区", // 区
        districtId: "1", // 区ID
        street: "陆家嘴街道", // 街道
        streetId: "陆家嘴金融贸易区", // 街道ID
        detailAddress: "上海市浦东新区陆家嘴金融贸易区", // 详细地址

        // 房屋信息模块
        houseType: "商品房", // 房屋类型
        unitType: "单位", // 单位类型
        contactPerson: "张先生", // 联系人
        contactPhone: "13800138000", // 联系电话
        houseNature: "商品房", // 房屋性质
        buildingArea: "100", // 建筑面积
        floor: "3", // 楼层

        // 时间信息模块
        applyDate: this.parseDateString("2024-01-15"), // 申请日期
        appointmentDate: this.parseDateString("2024-01-20"), // 预约日期
        constructionDate: this.parseDateString("2024-01-25"), // 施工日期
        acceptanceDate: this.parseDateString("2024-01-30"), // 验收日期

        // 查勘信息模块
        surveyDate: this.parseDateString("2024-01-18"), // 查勘日期
        houseTypeSurvey: "商品房", // 房屋类型(查勘)
        isTermite: "是", // 是否是白蚁
        isFirstTime: "是", // 是否首次
        discoveryLocation: "客厅、卧室", // 发现部位

        // 施工信息模块
        isConstruction: "是", // 是否灭治
        constructionSituation: "白蚁危害严重", // 施工情况
        constructionReason: "需要紧急处理", // 不施工原因
        constructionLocation: "客厅、卧室", // 灭治部位
        constructionArea: "50.5", // 灭治面积
        medicineName: "氯氰菊酯", // 用药名称
        chargeAmount: "1200.00", // 收费金额
        termiteSpecies: "散白蚁", // 白蚁蚁种
        constructionPersonnel: "李师傅", // 施工人员
        constructionDays: "2", // 施工天数
        constructionCost: "1000", // 施工费用
        constructionStatus: "已完工", // 施工状态

        // 验收信息模块
        acceptanceResult: "合格", // 验收结果
        acceptancePersonnel: "王经理", // 验收人员
        acceptanceOpinion: "验收通过", // 验收意见
        userSatisfaction: "满意", // 用户满意度
        qualityEvaluation: "施工质量良好", // 质量评价

        // 其他信息
        name: "白蚁灭治任务单", // 任务名称
        img1: "https://via.placeholder.com/200x150", // 现场照片1
        img3: "https://via.placeholder.com/200x150", // 现场照片2
      });
    },
    // 清空表单（新建模式）
    clearForm() {
      Object.assign(this.taskForm, {
        // 基本信息模块
        unitId: "",
        unitName: "",
        source: "",
        addressType: "",
        addressMethod: "",

        // 地址信息模块
        district: "",
        districtId: "",
        street: "",
        streetId: "",
        houseNumber: "",
        roomNumber: "",

        // 房屋信息模块
        unitType: "单位",
        companyName: "",
        contactPerson: "",
        contactPhone: "",
        houseType: "",
        houseNature: "",
        buildingArea: "",
        floor: "",

        // 时间信息模块
        applyDate: "",
        appointmentDate: "",
        constructionDate: "",
        acceptanceDate: "",

        // 查勘信息模块
        surveyDate: "",
        houseTypeSurvey: "",
        isTermite: "是",
        isFirstTime: "",
        discoveryLocation: "",

        // 施工信息模块
        isConstruction: "",
        constructionSituation: "",
        constructionReason: "",
        constructionLocation: "",
        constructionArea: "",
        medicineName: "",
        chargeAmount: "",
        termiteSpecies: "",
        otherSpecies: "",
        constructionPersonnel: "",
        constructionDays: "",
        constructionCost: "",
        constructionStatus: "",

        // 验收信息模块
        acceptanceResult: "",
        acceptancePersonnel: "",
        acceptanceOpinion: "",
        userSatisfaction: "",
        qualityEvaluation: "",

        // 其他信息
        name: "",
        img1: "",
        img3: "",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}
.formBox {
  .left {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    width: 30%;
    padding-right: 15px;
    border-left: 1px solid #e4e4dc;
    border-right: 1px solid #e4e4dc;
    font-family: MicrosoftYaHei;
    font-size: 12px;
    color: #303133;
    text-align: right;
    vertical-align: top;
  }
  .right {
    display: inline-block;
    width: 70%;
    height: 44px;
    border-right: 1px solid #e4e4dc;
    padding: 6px 15px;
  }
  .formHead {
    width: 100%;
    height: 44px;
    background-color: #5d6d7f;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
  }
  .formWhite {
    width: 100%;
    height: 44px;
    background-color: #fff;
    display: flex;
    .left {
      height: 44px;
      line-height: 44px;
      flex: 3;
      padding-right: 14px;
      border-bottom: 1px solid #e4e4dc;
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: #303133;
      text-align: right;
      vertical-align: top;
    }
    .right {
      flex: 7;
      height: 44px;
      border-bottom: 1px solid #e4e4dc;
      padding-right: 15px;
    }
  }
  .formGray {
    width: 100%;
    height: 44px;
    background-color: #dbe2e6;
  }
  .white {
    display: flex;
    background-color: #fff;
  }
  .gray {
    display: flex;
    background-color: #eef0f2;
  }
  .ml {
    flex: 3;
    display: flex;
    width: 30%;
    height: 352px;
    border-left: 1px solid #e4e4dc;
    border-right: 1px solid #e4e4dc;
    .mlLeft {
      flex: 1;
      border-right: 1px solid #e4e4dc;
      border-bottom: 1px solid #e4e4dc;
      padding-right: 15px;
      text-align: right;
      height: 352px;
      line-height: 352px;
    }

    .mlRight {
      flex: 1;

      .height1 {
        height: 44px;
        line-height: 44px;
        text-align: right;
        border-bottom: 1px solid #e4e4dc;
        padding-right: 15px;
      }
      .height3 {
        height: 132px;
        line-height: 132px;
        text-align: right;
        border-bottom: 1px solid #e4e4dc;
        padding-right: 15px;
      }
    }
  }
  .mr {
    flex: 7;

    .mrRight {
      height: 44px;
      border-right: 1px solid #e4e4dc;
      border-bottom: 1px solid #e4e4dc;
      padding: 6px 15px;
      display: flex;
      gap: 5px;
      .mrRight_left {
        flex: 3;
      }
      .mrRight_right {
        flex: 5;
      }
      .flex2 {
        flex: 2;
      }
    }
    .line3 {
      display: flex;
      height: 132px;
      .line3Left {
        flex: 3;
        display: flex;
        align-items: center;
        padding: 0 15px;
        border-right: 1px solid #e4e4dc;
        border-bottom: 1px solid #e4e4dc;
      }
      .line3Right {
        flex: 11;
        .box {
          height: 44px;
          display: flex;
          .box_left {
            flex: 3;
            text-align: right;
            line-height: 44px;
            padding-right: 15px;
          }
          .box_right {
            flex: 5;
            padding: 6px 15px;
          }
        }
        .box2 {
          height: 88px;
          display: flex;
          .box_left {
            flex: 3;
            text-align: right;
            line-height: 88px;
            padding-right: 15px;
          }
          .box_right {
            flex: 5;
            padding: 6px 15px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .mrr {
    flex: 7;
    display: flex;
    .mrr_left {
      flex: 3;
      padding: 6px 15px;
      display: flex;
      align-items: center;
    }
    .mrr_right {
      flex: 11;
      display: flex;
      flex-direction: column;
      .top {
        flex: 1;
        padding: 6px 15px;
      }
      .bottom {
        flex: 1;
        padding: 6px 15px;
      }
    }
  }
}
.h264 {
  height: 264px !important;
  line-height: 264px !important;
}
.h88 {
  height: 88px !important;
  line-height: 88px !important;
}
.h44 {
  height: 44px !important;
  line-height: 44px !important;
}
.rb {
  border-right: 1px solid #e4e4dc;
  border-bottom: 1px solid #e4e4dc;
}
.b {
  border-bottom: 1px solid #e4e4dc;
}
.formBox {
  ::v-deep .el-select {
    width: 100% !important;
  }
  ::v-deep .el-input {
    width: 100% !important;
  }
}

.mlBox {
  padding-right: 15px;
}
.red {
  color: red;
  margin-right: 5px;
}
.hcenter {
  display: flex;
  align-items: center;
}

.table-header {
  margin-bottom: 15px;
  text-align: left;
}
</style>
